<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head th:include="sys/user/include :: header"></head>
<style>
    .message{
    padding: 15px 20px;
    border-bottom:1px solid #efefef;
}
.message .change{
    display: none;
}
.bg_shadow{
    -webkit-box-shadow: 0 0 20px #e4e8eb;
    border-bottom: 1px solid #e7e7eb;
}
.message .content1{
    color:#9a9a9a;margin-top: 10px;font-size: 14px
}
.flex1{
    display: flex;justify-content: space-between;cursor: pointer;
}
.span_1{
    flex: 3;
    color: #999;
}

.span_2{
    flex:10;
    color: #333;
}
.this{
    background: #005C34;
}
.this a{
    color: #fff;
}
.noData{
    text-align: center;color:#999;font-size:58px
}
.span_1:hover, .span_2:hover{color:#005C34;}
.read{
    background-color: #ff5027;font-size: 12px;width: 45px;line-height: 18px;display: inline-block;
    text-align: center;border-radius: 4px;color: white;margin-left: 10px;
}
.readed{
    background-color: #009688;font-size: 12px;width: 45px;line-height: 18px;display: inline-block;
    text-align: center;border-radius: 4px;color: white;margin-left: 10px;
}

/*分页开始*/
#page {
  margin: 40px auto 20px auto;
  color: #666;
  display: block;
  text-align: center;
}

#page li {
  display: inline-block;
  min-width: 30px;
  height: 28px;
  cursor: pointer;
  color: #666;
  font-size: 13px;
  line-height: 28px;
  background-color: #f9f9f9;
  border: 1px solid #dce0e0;
  text-align: center;
  margin: 0 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.xl-nextPage,
.xl-prevPage {
  width: 60px;
  color: #005C34;
  height: 28px;
}

#page li.xl-disabled {
  opacity: .5;
  cursor: no-drop;
}

#page li.xl-disabled:hover{
  background-color: #f9f9f9 !important;
  border: 1px solid #dce0e0 !important;
  color: #666 !important;
}

#page li.xl-active {
  background-color: #005C34;
  border-color: #005C34;
  color: #FFF
}

#page li:hover{
  background-color:#005C34 !important;
  border-color:#005C34;
  color: #FFF
}

#page li.xl-jumpText {
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
  opacity: 1;
}

#page li.xl-jumpText:hover{
  background-color: rgba(0,0,0,0) !important;
  border-color: rgba(0,0,0,0) !important;
}

#page li.xl-jumpButton{
  padding: 0 5px;
}

#xlJumpNum {
  width: 35px;
  margin: 0 3px;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance:textfield;
}
/*分页结束*/
</style>
<body  class="gray-bg">
<input type="hidden" th:value="${state}" id="state" />
<main id="main" style=";">
    <section class="sec_1">
        <div class="div_2">
            <div id="msg">
            </div>
            <div id="page" class="page"></div>
        </div>
        <div style="clear: both"></div>
    </section>
</main>
<div th:include="sys/user/include :: footer"></div>
<script>
    $(function () {
        $.ajax({
            url: "/sys/user/msgList",
            type: 'GET',
            data: {
                type:'',
                state:$("#state").val(),
                current: 1,
                number: 10
            },
            success: function (res) {
                if (res.data.pages == 0) {
                    $("#msg").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data.records;
                    var news = '';
                    list.forEach(function (item, index) {
                        var a = '', b = '';
                        if (item.state == 0) {
                            a = '<span class="read">未读</span>'
                        } else if (item.state == 2) {
                            a = '<span class="readed">已读</span>'
                        }
                        if (item.enclosure != '' && item.enclosure != null) {
                            b = '<div><a href="' + item.enclosure + '" download style="text-decoration: underline;color: #649745" >附件下载</a></div>'
                        }
                        news += '<div href="#" class="message" data-id="' + item.id + '" data-state="' + item.state + '" onclick="msg(this)">' +
                            '<div class="flex1"><input type="hidden" value="' + item.id + '" id="msgId" />' +
                            '<span class="span_2">' + item.title + a + '</span>' +
                            '<span class="span_1">' + item.createrDate + '</span></div>' +
                            '<div class="s change content1">' + item.content + b + '</div></div>';
                    });
                    $("#msg").html(news);
                    page(1, res.data.pages);
                }
            }
        });
        $(".div_2").on("click", ".span_2", function () {
            $(this).parents(".message").find(".s").toggleClass("change");
            $(this).parents(".message").toggleClass("bg_shadow");
            $(this).parents(".message").siblings().find(".s").addClass("change");
            $(this).parents(".message").siblings().removeClass("bg_shadow");
        })
    });

    function msg(that) {
        var id = $(that).attr("data-id");
        var state = $(that).attr("data-state");
        if (state == 0) {
            $.ajax({
                url: '/sys/user/updateState',
                data: {id: id},
                success: function (r) {
                    if (r.code == 0) {
                        $(that).find(".read").html("已读");
                        $(that).find(".read").addClass("readed");
                    }
                }
            })
        }

    }

    function page(num, tolPages) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                $.ajax({
                    url: "/sys/user/msgList",
                    type: 'GET',
                    data: {
                        type:'',
                        state:$("#state").val(),
                        current: num,
                        number:10
                    },
                    success: function (res) {
                        var list = res.data.records;
                        var news = '';
                        list.forEach(function (item, index) {
                            var a = '', b = '';
                            if (item.state == 0) {
                                a = '<span class="read">未读</span>'
                            } else if (item.state == 2) {
                                a = '<span class="readed">已读</span>'
                            }
                            if (item.enclosure != '' && item.enclosure != null) {
                                b = '<div><a href="' + item.enclosure + '" download style="text-decoration: underline;color: #649745" >附件下载</a></div>'
                            }
                            news += '<div href="#" class="message" data-id="' + item.id + '" data-state="' + item.state + '" onclick="msg(this)">' +
                                '<div class="flex1"><input type="hidden" value="' + item.id + '" id="msgId" />' +
                                '<span class="span_2">' + item.title + a + '</span>' +
                                '<span class="span_1">' + item.createrDate + '</span></div>' +
                                '<div class="s change content1">' + item.content + b + '</div></div>';
                        });
                        $("#msg").html(news);
                    }
                });
            }
        });
    }
</script>
<script type="text/javascript" src="/js/xlPaging.js"></script>
</body>
</html>